import React, { Component } from 'react'
import { Cell, Typography, Checkbox, Flex, Dialog } from 'react-vant'

import { Add, DeleteO } from '@react-vant/icons';
import "./css/zccount.css"
// 引入上下文
import CTX from './ctx'
//案例入口  案例首页
export default class Zccount extends Component {
  // 使用上下文
  static contextType = CTX
  // 计算总收入
  get sTotal() {
    let { zccountlist } = this.context;
    return zccountlist.reduce((sum, v) => v.type == 2 ? sum += v.total : sum += 0, 0)*1
  }
  //计算总支出
  get zTotal() {
    let { zccountlist } = this.context
    return zccountlist.reduce((sum, v) => v.type == 1 ? sum += v.total : sum += 0, 0)*1
  }
  render() {
    let { zccountlist } = this.context;

    return (
      <div className='box'>
        <div className='cellList'>
          {/* 列表 */}
          {
            zccountlist.map(v => {
              return <Cell
                center
                key={v.id}
                title={v.title}
                value={<div><Typography.Text type={v.type == 1 ? 'danger' : 'primary'}>{v.type == 1 ? '-' : '+'}{v.total.toFixed(2)}</Typography.Text><span onClick={() => {
                  Dialog.confirm({
                    title: '标题',
                    message: '代码是写出来给人看的，附带能在机器上运行',
                    onConfirm: () => {
                      this.context.del(v.id)
                    },
                  }).catch(()=>{"删除失败"})
                }}>删除</span></div>}
                label={v.ms}
                icon={<Checkbox checked={v.sed} onChange={() => {
                  this.context.onChangesed(v.id)
                }}></Checkbox>}
              />
            })
          }

        </div>
        {/* 添加按钮 */}
        <div style={{ width: "100px", margin: "0 auto" }}>
          <Add color="blue" fontSize="70" onClick={()=>{
            // 跳转到添加页面
            this.props.history.push("/addcom")
          }} />
        </div>

        {/* 计算+垃圾桶删除 */}
        <Flex justify='center' align='center' style={{ textAlign: "center" }}>
          <Flex.Item span={12}>
            <Typography.Text type='primary'>总收入:{this.sTotal}</Typography.Text><br />
            <Typography.Text type="danger">总支出:{this.zTotal}</Typography.Text><br />
            <Typography.Text type="success">总计:{this.sTotal - this.zTotal}</Typography.Text>
          </Flex.Item>
          {/* 删除已完成 */}
          <Flex.Item span={12}><DeleteO fontSize="60" onClick={() => {
            this.context.dellist()
          }} /></Flex.Item>
        </Flex>
      </div>
    )
  }
}
